/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-08-28 16:22:34
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
} from 'react-native';
import {
  mainBgColorLightGray,
  fontColorCoffee,
  px2dp,
  fontColorSecDeepGray,
  fontColor_lightCoffee,
} from '@/styles';

export default class SelectItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  static defaultProps = {
    style: {}
  }

  componentDidMount() { }

  render() {
    const { name, value, activeVal, style } = this.props;

    return (
      <TouchableOpacity
        activeOpacity={1}
        style={[
          styles.selectItem,
          style,
          activeVal.includes(value)
            ? { backgroundColor: fontColor_lightCoffee }
            : {},
        ]}
        onPress={() => {
          this.onChange();
        }}
      >
        <Text
          style={{
            fontSize: px2dp(28),
            color:
              value === activeVal ? fontColorCoffee : fontColorSecDeepGray,
          }}
        >
          {name}
        </Text>
      </TouchableOpacity>
    );
  }

  onChange = () => {
    const { maxLength, onChange, type, value, activeVal, name } = this.props;
    // 以下是多选内容，目前只需要做到单选
    if (maxLength) {
      if (!activeVal.includes(value) || activeVal.length > maxLength) {
        if (activeVal.length >= maxLength) {
          return;
        }
        activeVal.push(value);
        onChange(type, activeVal);
      } else {
        const index = activeVal.indexOf(value);
        activeVal.splice(index, 1);
        onChange(type, activeVal);
      }
    } else {
      onChange(type, [value], name);
    }
  }
}
const styles = StyleSheet.create({
  selectItem: {
    width: px2dp(218),
    height: px2dp(72),
    backgroundColor: mainBgColorLightGray,
    borderRadius: px2dp(8),
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: px2dp(16),
    marginRight: px2dp(10),
  },
});
